<template>
  <div style="margin-top: 20px">一、基本信息</div>
  <el-form
    label-width="auto"
    label-position="top"
    class="demo-ruleForm"
    style="margin-top: 20px"
  >
    <el-form-item label="项目级别类别">
      <el-select
        v-model="ruleForm.levelType"
        placeholder="请选择"
        style="width: 300px"
      >
        <el-option
          v-for="item in dictStore.getDictType('project_level')"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="技术领域：">
      <el-select
        v-model="ruleForm.techFields"
        placeholder="请选择"
        style="width: 300px"
      >
        <el-option
          v-for="item in dictStore.getDictType('technical_field')"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="ruleForm.techFieldsOther"
        style="width: 300px; margin-left: 20px"
      />
    </el-form-item>
    <el-form-item label="拟研发技术现阶段成熟度：">
      <el-select
        v-model="ruleForm.maturity"
        placeholder="请选择"
        style="width: 300px"
      >
        <!-- yfjsxjdcsd -->
        <el-option
          v-for="item in dictStore.getDictType('yfjsxjdcsd')"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="承担单位：">
      <el-select
        v-model="ruleForm.bearerDepid"
        placeholder="请选择"
        style="width: 300px"
      >
        <el-option
          v-for="item in depts"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item> -->
  </el-form>
  <el-form label-position="top" style="margin-top: 20px">
    <el-form-item label="报告上报单位（人员）名称（姓名）、电话及邮箱：" />
    <vxe-table
      border
      show-overflow
      :data="members"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      >
      <vxe-column
        field="userId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row }">
          <vxe-select v-model="row.userId" transfer>
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.userId" transfer>
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="depId" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-select v-model="row.depId" transfer>
            <vxe-option
              v-for="item in depts"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="phone" title="联系电话" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.phone" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="email" title="邮箱" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.email" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <el-button
      style="margin-top: 20px"
      type="primary"
      :icon="Plus"
      @click="handleAdd"
    >
      增加成员
    </el-button>
    <el-form-item label="知识产权审核单位（人员）名称（姓名）、电话及邮箱：" />
    <vxe-table
      border
      show-overflow
      :data="members1"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      <vxe-column
        field="userId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row }">
          <vxe-select v-model="row.userId" transfer>
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.userId" transfer>
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="depId" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-select v-model="row.depId" transfer>
            <vxe-option
              v-for="item in depts"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="phone" title="联系电话" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.phone" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="email" title="邮箱" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.email" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <el-button
      style="margin-top: 20px"
      type="primary"
      :icon="Plus"
      @click="handleAdd1"
    >
      增加成员
    </el-button>
    <el-form-item label="项目经理姓名、所属单位、电话及邮箱：" />
    <vxe-table
      border
      show-overflow
      :data="leader"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      <vxe-column
        field="userId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row }">
          <vxe-select v-model="row.userId" transfer>
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.userId" transfer>
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="depId" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-select v-model="row.depId" transfer>
            <vxe-option
              v-for="item in depts"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="phone" title="联系电话" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.phone" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="email" title="邮箱" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.email" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
  </el-form>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { useDictStore } from '@/store/modules/dict'
  import { getAllUser } from '@/api/system/user'
  import { getDeptPage } from '@/api/system/dept/index'

  const $baseMessage = inject('$baseMessage')
  const dictStore = useDictStore()

  const ruleForm = reactive({
    levelType: '',
    techFields: '',
    techFieldsOther: '',
    maturity: '',
  })

  const users = ref([])
  const depts = ref([])

  const leader = ref([
    {
      userId: '',
      depId: '',
      email: '',
      phone: '',
      type: 3,
    },
  ])

  const members = ref([
    {
      userId: '',
      depId: '',
      email: '',
      phone: '',
      type: 1,
    },
  ])

  const members1 = ref([
    {
      userId: '',
      depId: '',
      email: '',
      phone: '',
      type: 2,
    },
  ])

  const getUserList = () => {
    getAllUser().then((res) => {
      if (res.code == 0 || res.code == 200) {
        users.value = res.data || []
      }
    })
  }

  const getDepts = () => {
    getDeptPage().then((res) => {
      if (res.code == 0 || res.code == 200) {
        depts.value = res.data || []
      }
    })
  }

  const handleAdd = () => {
    members.value.push({
      userId: '',
      name: '',
      unitDepartment: '',
      age: '',
      titlePosition: '',
      specialty: '',
      phone: '',
      type: 2,
    })
  }

  const handleAdd1 = () => {
    members1.value.push({
      userId: '',
      name: '',
      unitDepartment: '',
      age: '',
      titlePosition: '',
      specialty: '',
      phone: '',
      type: 2,
    })
  }

  const getFormData = () => {
    for (const key in ruleForm) {
      if (!ruleForm[key]) {
        $baseMessage('请填写基本信息', 'error')
        return false
      }
    }
    for (let i = 0; i < leader.value.length; i++) {
      for (const key in leader.value[i]) {
        if (!leader.value[i][key]) {
          $baseMessage(
            '请填写完整的项目经理姓名、所属单位、电话及邮箱',
            'error'
          )
          return false
        }
      }
    }
    for (let i = 0; i < members.value.length; i++) {
      for (const key in members.value[i]) {
        if (!members.value[i][key]) {
          $baseMessage(
            '请填写完整的报告上报单位（人员）名称（姓名）、电话及邮箱',
            'error'
          )
          return false
        }
      }
    }
    for (let i = 0; i < members1.value.length; i++) {
      for (const key in members1.value[i]) {
        if (!members1.value[i][key]) {
          $baseMessage(
            '请填写完整的知识产权审核单位（人员）名称（姓名）、电话及邮箱',
            'error'
          )
          return false
        }
      }
    }

    const formData = [...leader.value, ...members.value, ...members1.value].map(
      (item) => {
        return {
          ...item,
          userName:
            users.value.find((key) => key.id == item.userId)?.nickname || '',
          depName: depts.value.find((key) => key.id == item.depId)?.name || '',
        }
      }
    )

    return {
      ipMemberList: formData,
      ...ruleForm,
    }
  }

  const setFormData = ({ ipBaseInfo, ipMemberList }) => {
    for (const key in ruleForm) {
      ruleForm[key] = ipBaseInfo[key].toString()
    }

    members.value = ipMemberList.filter((item) => item.type == 1) || []
    members1.value = ipMemberList.filter((item) => item.type == 3) || []
    leader.value = ipMemberList.filter((item) => item.type == 3) || []
  }

  getUserList()
  getDepts()

  defineExpose({ getFormData, setFormData })
</script>

<style lang="scss" scoped></style>
